<template>
  <view class="content">
    <view class="form">
      <view class="item">
        <view class="label">
          <span class="red">*</span>
          <span>当前密码</span>
        </view>
        <input class="ipt" type="text" placeholder="请输入当前密码" v-model="info.old_password">
      </view>
      <view class="item">
        <view class="label">
          <span class="red">*</span>
          <span>新密码</span>
        </view>
        <input class="ipt" type="text" placeholder="密码长度不少于6位数" v-model="info.new_password">
      </view>
      <view class="item">
        <view class="label">
          <span class="red">*</span>
          <span>重复新密码</span>
        </view>
        <input class="ipt" type="text" placeholder="密码长度不少于6位数" v-model="info.confirm_password">
      </view>

      <view class="btn" @tap="savePassword()">
        确认提交
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {
          old_password: '',
          new_password: '',
          confirm_password: ''
        }
      };
    },
    methods: {
      async savePassword() {
        if (!this.info.old_password) {
          return this.toast.msg('请输入原密码')
        }
        if (!this.info.new_password) {
          return this.toast.msg('请输入新密码')
        }
        if (this.info.new_password.length < 6) {
          return this.toast.msg('新密码长度不能低于6位数')
        }
        if (this.info.new_password != this.info.confirm_password) {
          return this.toast.msg('两次密码输入不一致')
        }
        const {
          data: res
        } = await uni.$http.post('school/index/savePassword', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        uni.navigateTo({
          url: '../login/login'
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    padding-left: 51rpx;

    .form {
      margin-top: 80rpx;

      .item {
        padding-left: 20rpx;
        width: 652rpx;
        height: 78rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        border-radius: 10rpx;
        border: 2rpx solid #FCF7F7;
        margin-bottom: 30rpx;

        .label {
          width: 200rpx;

          .red {
            color: #F00202;
            margin-right: 15rpx;
            line-height: 78rpx;
          }
        }

        .ipt {
          height: 78rpx;
          flex: 1;
        }
      }
    }

    .btn {
      position: fixed;
      bottom: 58rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 652rpx;
      height: 78rpx;
      text-align: center;
      line-height: 78rpx;
      background: #CCCCCC;
      border: 2rpx solid #69A1E0;
    }
  }
</style>